<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2023-10-02 22:46:50
 * @LastEditors: yuxi
 * @LastEditTime: 2023-10-02 23:09:40
-->
<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-17 13:06:27
-->
<template>
  <div class="map-container">
    <MiningMap :useContextMenu="true" :customContextMenus="customContextMenus">
      <MiningTiandituLayer :ak="key" @ready="ready"></MiningTiandituLayer>
      <template v-slot:contextMenu="{ position, offset, contentMenus }">
        <div>
          自定义菜单属性：<br />
          位置：{{ position }} <br />
          偏移量：{{ offset }} <br />
          菜单内容：{{ contentMenus }}
        </div>
      </template>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import { TiandituKey } from '@/config/config.js'

export default {
  name: 'CustomerContextMenu',
  title: '自定义右键菜单',
  parentTitle: '控件',
  components: {
    MiningMap,
    MiningTiandituLayer,
  },
  data() {
    return {
      key: TiandituKey,
      customContextMenus: [
        {
          name: '测试菜单',
          handler: () => {
            this.$message.success('点击菜单')
          },
        },
      ],
    }
  },
  methods: {
    ready() {},
  },
}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}
</style>
